<script lang="js" setup>
    import TopHeader from '../components/TopHeader.vue';
    import wordcloud from '../components/wordcloud.vue';
    import ComputerToptwentyUniversities from '../components/ComputerToptwentyUniversities.vue';
    import ToptenUniversitiesMajors from '../components/ToptenUniversitiesMajors.vue';
    import ruanjian from '../components/ruanjian.vue';
    import RegionalUniversityTypes from '../components/RegionalUniversityTypes.vue';
</script>
<template>
  <div class="maindivTwo">
    <dv-full-screen-container class="containerTwo">
        <!--大标题-->
    <div class="top-header">
        <TopHeader></TopHeader>
    </div>
    <div class="container">
      <div class="left">
        <div class="left-top">
            <wordcloud></wordcloud>
        </div>
        <div class="left-bottom">
            <RegionalUniversityTypes></RegionalUniversityTypes>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
            <ComputerToptwentyUniversities></ComputerToptwentyUniversities>
        </div>
        <div class="right-middle">
            <ToptenUniversitiesMajors></ToptenUniversitiesMajors>
        </div>
        <div class="right-bottom">
            <ruanjian></ruanjian>
        </div>
      </div>
    </div>
    </dv-full-screen-container>
  </div>
</template>
<style lang="css">
  .maindivTwo{
    width: 100vw;height: 100vh;
    background-image: url('../assets/imgs/BackGround.png');
    background-size: 100% 100%;
    margin:0;
    padding: 0;
    position:absolute;
    top:0;
    left:0;

  }
    /**头部组件的设置 */
    .top-header{
        width: 100%;
        height: 100px;
    }
    /**全屏容器样式的设置 */
    
.containerTwo{
        width: 100%;
        height: 100%;
    }
    .container {
    display: flex;
    justify-content: space-between; /* 使两列分布均匀 */
    gap: 20px; /* 左右列之间的间距 */
  }
  
  .left {
    display: flex;
    flex-direction: column; /* 左边列为垂直排列 */
    gap: 10px; /* 两行之间的间距 */
    flex: 1; /* 左边列占据可用宽度 */
  }
  .right {
    display: flex;
    flex-direction: column; /* 右边列为垂直排列 */
    gap: 10px; /* 三行之间的间距 */
    flex: 1; /* 右边列占据可用宽度 */
  }
  .left-top, .left-bottom,
  .right-top, .right-middle, .right-bottom {
    padding: 10px;
  }
</style>